<template>
  <div style="width: 100%; height: 100%">
    <div id="amapcontainer" style="width: 100%; height: 90%"></div>

    <div>
      <el-button type="warning" @click="compile">新建</el-button>
      <el-button type="primary" @click="edit">开始编辑</el-button>
      <el-button type="success" @click="saveRectangle">保存</el-button>
      <el-button type="danger" @click="clear">清除</el-button>
    </div>
  </div>
</template>

  <script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { updateFence, getFence } from "@/api/passenger/fence";

export default {
  data() {
    return {
      iscompile: false,
      polygon: null,
      map: null,
      mouseTool: null,
      PolygonEditor: null,
      overlays: [],
      disabled: false,
      compileArr: [],
      path: [], // 围栏的经纬度坐标数组
      paths: [],
      polyEditors: [], // 新增数据=>所有编辑对象数组
      polyEditorsBefore: [], // 以前历史数据=>进入编辑对象数组
      id: this.$route.query.id, //围栏id
      oldpath: [],
    };
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "a13f2a0c15e7fc108af3a866c14ee5d8", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale",
          "AMap.ToolBar",
          "AMap.ControlBar",
          "AMap.Geocoder",
          "AMap.Marker",
          "AMap.CitySearch",
          "AMap.Geolocation",
          "AMap.AutoComplete",
          "AMap.InfoWindow",
          "AMap.MouseTool",
          "AMap.Polygon",
          "AMap.PolyEditor",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 获取到作为地图容器的DOM元素，创建地图实例
          this.map = new AMap.Map("amapcontainer", {
            //设置地图容器id
            resizeEnable: true,
            // zoom: this.zoom, // 地图显示的缩放级别
            viewMode: "3D", // 使用3D视图
            zoomEnable: true, // 地图是否可缩放，默认值为true
            dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
            doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
            zoom: 11, //初始化地图级别
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    // 新建
    compile() {
      const This = this;
      let mouseTool = new AMap.MouseTool(this.map);
      const polygon = mouseTool.polygon({
        //polygon：绘制多边形【线段：polyline;矩形：rectangle;圆：circle】
        strokeColor: "purple",
        strokeOpacity: 0.4,
        strokeWeight: 6,
        fillColor: "#1791fc",
        fillOpacity: 0.2,
        strokeStyle: "solid",
      });
      let path = []; // 编辑的路径
      mouseTool.on("draw", function (event) {
        //     // event.obj 为绘制出来的覆盖物对象
        let polygonItem = event.obj;
        let paths = polygonItem.getPath(); //取得绘制的多边形的每一个点坐标
        //     // console.log('覆盖物对象绘制完成各个点的坐标', paths, event);
        paths.forEach((v) => {
          path.push([v.lng, v.lat]);
        });
      });

      this.path = path;
    },
    //保存
    saveRectangle() {
      let params = {};
      params.id = this.id;
      params.path = JSON.stringify(this.path);
      updateFence(params).then((resp) => {
        this.$modal.msgSuccess("保存成功");
        this.$router.push("fence");
      });
    },

    //编辑
    edit() {
      this.clear();
      let _this = this;
      getFence(this.id).then((response) => {
        _this.oldpath = response.data.path;
        console.log(" this.oldpath"+ _this.oldpath); // 打印围栏路径数据

        this.polygon = new AMap.Polygon({
          path: JSON.parse(_this.oldpath),
          strokeColor: "#FF33FF",
          strokeWeight: 3,
          strokeOpacity: 0.2,
          fillColor: "#1791fc",
          fillOpacity: 0.1,
        });
        this.map.add(this.polygon);
        this.map.setFitView([this.polygon]);
        //设置电子围栏可编辑
        var editor = new AMap.PolyEditor(this.map, this.polygon);
        editor.open();
      });
    },

    // 清除
    clear() {
      this.polyEditors.forEach((item) => {
        item.close();
      }); // 取消编辑状态
      this.polyEditorsBefore.forEach((item) => {
        item.close();
      }); // 取消编辑状态
      this.map.clearMap(); // 删除地图所有覆盖物
    },

    //回显
    huixian() {
      let _this = this;
      getFence(this.id).then((response) => {
        _this.oldpath = response.data.path;

        console.log(" this.oldpath" + this.oldpath); // 打印围栏路径数据

        this.polygon = new AMap.Polygon({
          path: JSON.parse(_this.oldpath),
          strokeColor: "#FF33FF",
          strokeWeight: 3,
          strokeOpacity: 0.2,
          fillColor: "#1791fc",
          fillOpacity: 0.1,
        });
        this.map.add(this.polygon);
        this.map.setFitView([this.polygon]);
      });
    },
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initAMap(1000);
    this.huixian();
  },
};
</script>

  <style lang="less">
</style>
